TypeScript Interface vs Type: Praktik Terbaik Deklarasi untuk Pengembang Global

TypeScript, superset dari JavaScript, memberdayakan pengembang di seluruh dunia untuk membangun aplikasi yang kuat dan skalabel melalui pengetikan statis. Dua konstruksi fundamental untuk mendefinisikan tipe adalah Interface dan Type. Meskipun keduanya memiliki kesamaan, memahami nuansa dan kasus penggunaan yang tepat sangat penting untuk menulis kode yang bersih, mudah dipelihara, dan efisien. Panduan komprehensif ini akan mendalami perbedaan antara TypeScript Interface dan Type, serta menjelajahi praktik terbaik untuk memanfaatkannya secara efektif dalam proyek Anda.

Memahami TypeScript Interface

Sebuah Interface dalam TypeScript adalah cara yang kuat untuk mendefinisikan kontrak untuk sebuah objek. Interface menguraikan bentuk sebuah objek, menentukan properti yang harus dimilikinya, tipe datanya, dan secara opsional, metode apa pun yang harus diimplementasikan. Interface utamanya mendeskripsikan struktur objek.

Sintaks dan Contoh Interface

Sintaks untuk mendefinisikan sebuah interface cukup sederhana:

            
interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

const user: User = {
  id: 123,
  name: "Alice Smith",
  email: "alice.smith@example.com",
  isActive: true,
};

            

              
                Copy
              
            
          

Dalam contoh ini, interface User mendefinisikan struktur objek pengguna. Setiap objek yang ditetapkan ke variabel user harus mematuhi struktur ini; jika tidak, kompiler TypeScript akan memunculkan error.

Fitur Utama dari Interface

• Definisi Bentuk Objek: Interface unggul dalam mendefinisikan struktur atau "bentuk" objek.
• Ekstensibilitas: Interface dapat dengan mudah diperluas menggunakan kata kunci extends, memungkinkan pewarisan dan penggunaan kembali kode.
• Penggabungan Deklarasi (Declaration Merging): TypeScript mendukung penggabungan deklarasi untuk interface, yang berarti Anda dapat mendeklarasikan interface yang sama beberapa kali, dan kompiler akan menggabungkannya menjadi satu deklarasi tunggal.

Contoh Penggabungan Deklarasi

            
interface Window {
  title: string;
}

interface Window {
  height: number;
  width: number;
}

const myWindow: Window = {
  title: "My Application",
  height: 800,
  width: 600,
};

            

              
                Copy
              
            
          

Di sini, interface Window dideklarasikan dua kali. TypeScript menggabungkan deklarasi-deklarasi ini, secara efektif menciptakan sebuah interface dengan properti title, height, dan width.

Menjelajahi TypeScript Type

Sebuah Type dalam TypeScript menyediakan cara untuk mendefinisikan bentuk data. Berbeda dengan interface, type lebih serbaguna dan dapat merepresentasikan rentang struktur data yang lebih luas, termasuk tipe primitif, union, intersection, dan tuple.

Sintaks dan Contoh Type

Sintaks untuk mendefinisikan alias type adalah sebagai berikut:

            
type Point = {
  x: number;
  y: number;
};

const origin: Point = {
  x: 0,
  y: 0,
};

            

              
                Copy
              
            
          

Dalam contoh ini, type Point mendefinisikan struktur objek titik dengan koordinat x dan y.

Fitur Utama dari Type

• Union Type: Type dapat merepresentasikan gabungan (union) dari beberapa tipe, memungkinkan sebuah variabel untuk menampung nilai dari tipe yang berbeda.
• Intersection Type: Type juga dapat merepresentasikan irisan (intersection) dari beberapa tipe, menggabungkan properti dari semua tipe menjadi satu tipe tunggal.
• Tipe Primitif: Type dapat secara langsung merepresentasikan tipe primitif seperti string, number, boolean, dll.
• Tipe Tuple: Type dapat mendefinisikan tuple, yaitu array dengan panjang tetap dengan tipe spesifik untuk setiap elemennya.
• Lebih serbaguna: Dapat mendeskripsikan hampir semua hal, dari tipe data primitif hingga bentuk objek yang kompleks.

Contoh Union Type

            
type Result = {
  success: true;
  data: any;
} | {
  success: false;
  error: string;
};

const successResult: Result = {
  success: true,
  data: { message: "Operation successful!" },
};

const errorResult: Result = {
  success: false,
  error: "An error occurred.",
};

            

              
                Copy
              
            
          

Type Result adalah union type yang bisa berupa keberhasilan dengan data atau kegagalan dengan pesan error. Ini berguna untuk merepresentasikan hasil dari operasi yang mungkin berhasil atau gagal.

Contoh Intersection Type

            
type Person = {
  name: string;
  age: number;
};

type Employee = {
  employeeId: string;
  department: string;
};

type EmployeePerson = Person & Employee;

const employee: EmployeePerson = {
  name: "Bob Johnson",
  age: 35,
  employeeId: "EMP123",
  department: "Engineering",
};

            

              
                Copy
              
            
          

Type EmployeePerson adalah intersection type, yang menggabungkan properti dari Person dan Employee. Ini memungkinkan Anda untuk membuat tipe baru dengan menggabungkan tipe yang sudah ada.

Perbedaan Utama: Interface vs Type

Meskipun interface dan type sama-sama berfungsi untuk mendefinisikan struktur data di TypeScript, ada perbedaan utama yang memengaruhi kapan harus menggunakan satu di antara yang lain:

1. Penggabungan Deklarasi (Declaration Merging): Interface mendukung penggabungan deklarasi, sedangkan type tidak. Jika Anda perlu memperluas definisi tipe di beberapa file atau modul, interface umumnya lebih disukai.
2. Union Type: Type dapat merepresentasikan union type, sedangkan interface tidak dapat secara langsung mendefinisikan union. Jika Anda perlu mendefinisikan tipe yang bisa menjadi salah satu dari beberapa tipe yang berbeda, gunakan alias type.
3. Intersection Type: Type dapat membuat intersection type menggunakan operator &. Interface dapat memperluas interface lain, mencapai efek yang serupa, tetapi intersection type menawarkan fleksibilitas yang lebih besar.
4. Tipe Primitif: Type dapat secara langsung merepresentasikan tipe primitif (string, number, boolean), sedangkan interface utamanya dirancang untuk mendefinisikan bentuk objek.
5. Pesan Error: Beberapa pengembang merasa bahwa interface menawarkan pesan error yang sedikit lebih jelas dibandingkan dengan type, terutama saat berurusan dengan struktur tipe yang kompleks.

Praktik Terbaik: Memilih Antara Interface dan Type

Memilih antara interface dan type tergantung pada kebutuhan spesifik proyek Anda dan preferensi pribadi Anda. Berikut adalah beberapa panduan umum untuk dipertimbangkan:

• Gunakan interface untuk mendefinisikan bentuk objek: Jika Anda utamanya perlu mendefinisikan struktur objek, interface adalah pilihan yang alami. Kemampuan ekstensibilitas dan penggabungan deklarasinya bisa sangat bermanfaat dalam proyek yang lebih besar.
• Gunakan type untuk union type, intersection type, dan tipe primitif: Ketika Anda perlu merepresentasikan gabungan tipe, irisan tipe, atau tipe primitif sederhana, gunakan alias type.
• Jaga konsistensi dalam basis kode Anda: Terlepas dari apakah Anda memilih interface atau type, usahakan untuk konsisten di seluruh proyek Anda. Menggunakan gaya yang konsisten akan meningkatkan keterbacaan dan pemeliharaan kode.
• Pertimbangkan penggabungan deklarasi: Jika Anda mengantisipasi kebutuhan untuk memperluas definisi tipe di beberapa file atau modul, interface adalah pilihan yang lebih baik karena fitur penggabungan deklarasinya.
• Utamakan interface untuk API publik: Saat merancang API publik, interface sering kali lebih disukai karena lebih mudah diperluas dan memungkinkan konsumen API Anda untuk dengan mudah memperluas tipe yang Anda definisikan.

Contoh Praktis: Skenario Aplikasi Global

Mari kita pertimbangkan beberapa contoh praktis untuk mengilustrasikan bagaimana interface dan type dapat digunakan dalam aplikasi global:

1. Manajemen Profil Pengguna (Internasionalisasi)

Misalkan Anda sedang membangun sistem manajemen profil pengguna yang mendukung berbagai bahasa. Anda dapat menggunakan interface untuk mendefinisikan struktur profil pengguna dan type untuk merepresentasikan kode bahasa yang berbeda:

            
interface UserProfile {
  id: number;
  name: string;
  email: string;
  preferredLanguage: LanguageCode;
  address: Address;
}

interface Address {
    street: string;
    city: string;
    country: string;
    postalCode: string;
}

type LanguageCode = "en" | "fr" | "es" | "de" | "zh"; // Contoh kode bahasa

const userProfile: UserProfile = {
  id: 1,
  name: "John Doe",
  email: "john.doe@example.com",
  preferredLanguage: "en",
  address: { street: "123 Main St", city: "Anytown", country: "USA", postalCode: "12345" }
};

            

              
                Copy
              
            
          

Di sini, interface UserProfile mendefinisikan struktur profil pengguna, termasuk bahasa pilihan mereka. Type LanguageCode adalah union type yang merepresentasikan bahasa yang didukung. Interface Address mendefinisikan format alamat, dengan asumsi format global yang generik.

2. Konversi Mata Uang (Globalisasi)

Pertimbangkan aplikasi konversi mata uang yang perlu menangani berbagai mata uang dan nilai tukar. Anda dapat menggunakan interface untuk mendefinisikan struktur objek mata uang dan type untuk merepresentasikan kode mata uang:

            
interface Currency {
  code: CurrencyCode;
  name: string;
  symbol: string;
}

interface ExchangeRate {
  baseCurrency: CurrencyCode;
  targetCurrency: CurrencyCode;
  rate: number;
}


type CurrencyCode = "USD" | "EUR" | "GBP" | "JPY" | "CAD"; // Contoh kode mata uang

const usd: Currency = {
  code: "USD",
  name: "United States Dollar",
  symbol: "$",
};

const exchangeRate: ExchangeRate = {
  baseCurrency: "USD",
  targetCurrency: "EUR",
  rate: 0.85,
};

            

              
                Copy
              
            
          

Interface Currency mendefinisikan struktur objek mata uang, termasuk kode, nama, dan simbolnya. Type CurrencyCode adalah union type yang merepresentasikan kode mata uang yang didukung. Interface ExchangeRate digunakan untuk merepresentasikan nilai konversi antara mata uang yang berbeda.

3. Validasi Data (Format Internasional)

Saat menangani input data dari pengguna di berbagai negara, penting untuk memvalidasi data sesuai dengan format internasional yang benar. Sebagai contoh, nomor telepon memiliki format yang berbeda berdasarkan kode negara. Type dapat digunakan untuk merepresentasikan variasi tersebut.

            
type PhoneNumber = {
  countryCode: string;
  number: string;
  isValid: boolean; // Tambahkan boolean untuk merepresentasikan data valid/tidak valid.
};

interface Contact {
   name: string;
   phoneNumber: PhoneNumber;
   email: string;
}


function validatePhoneNumber(phoneNumber: string, countryCode: string): PhoneNumber {
  // Logika validasi berdasarkan countryCode (misalnya, menggunakan pustaka seperti libphonenumber-js)
  // ... Implementasi di sini untuk memvalidasi nomor.
  const isValid = true; //placeholder

  return { countryCode, number: phoneNumber, isValid };
}

const contact: Contact = {
    name: "Jane Doe",
    phoneNumber: validatePhoneNumber("555-123-4567", "US"), //contoh
    email: "jane.doe@email.com",
};


console.log(contact.phoneNumber.isValid); //output pemeriksaan validasi.

            

              
                Copy
              
            
          

Kesimpulan: Menguasai Deklarasi TypeScript

TypeScript Interface dan Type adalah alat yang kuat untuk mendefinisikan struktur data dan meningkatkan kualitas kode. Memahami perbedaannya dan memanfaatkannya secara efektif sangat penting untuk membangun aplikasi yang kuat, mudah dipelihara, dan skalabel. Dengan mengikuti praktik terbaik yang diuraikan dalam panduan ini, Anda dapat membuat keputusan yang tepat tentang kapan harus menggunakan interface dan type, yang pada akhirnya akan meningkatkan alur kerja pengembangan TypeScript Anda dan berkontribusi pada kesuksesan proyek Anda.

Ingatlah bahwa pilihan antara interface dan type sering kali merupakan masalah preferensi pribadi dan persyaratan proyek. Bereksperimenlah dengan kedua pendekatan untuk menemukan apa yang paling cocok untuk Anda dan tim Anda. Merangkul kekuatan sistem tipe TypeScript tidak diragukan lagi akan menghasilkan kode yang lebih andal dan mudah dipelihara, yang bermanfaat bagi pengembang di seluruh dunia.